<template>
  <div class="main">
    <el-row :gutter="10">
      <el-alert style="margin-bottom: 10px" title="性能观测" type="success" :closable="false" />
      <el-col :span="12">
        <div style="width: 100%;height:400px;" id="performance"></div>
      </el-col>
      <el-col :span="12">
        <div id="experienceMap" style="width:100%;height:400px;"></div>
      </el-col>
    </el-row>
     <el-row :gutter="10" style="margin-top:30px">
      <el-alert style="margin-bottom: 10px" title="埋点上报" type="error" :closable="false" />
      <el-col :span="24">
        <div style="width: 100%;height:400px;" id="point"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
import { Performance_Api,BuryingPoint_Api } from "@/api/sdk";
import { experienceMap } from "./experienceMap";
import { performanceMap } from "./performance";
import { timeStay } from "./timeStay";



let { proxy } = getCurrentInstance();
let echarts = proxy.$echarts;
onMounted(async () => {
  try {
    let { data } = await Performance_Api()
    experienceMap(echarts, data.experienceMap)
    performanceMap(echarts, data.performanceMap)
    let res = await BuryingPoint_Api()
    if (res) {
      let data_ = res.data
      timeStay(echarts, data_)
    }
  } catch (error) {
    console.log(error);
  }
})
</script>
